<template>
    <div>


        户型名称<input type="text" v-model="date.uname" >
        <input type="button" value="查询" @change="cx">
        <h1>显示列表</h1>
      <table>
        <thead>
            <tr>
                
                <td>所属项目</td>
                <td>户型名称</td>
                <td>户型结构</td>
                <td>建筑面积</td>
                <td>套内面积</td>
                <td>户型图</td>
                <td>操作</td>
               
            </tr>
        </thead>
        <tbody>
            <tr v-for="a in list">
                
                <td>{{a.uxm}}</td>
                <td>{{a.uname}}</td>
                <td>{{a.hid}}</td>
                <td>{{a.ares}}</td>
                <td>{{a.tnares}}</td>
                <td>
                    <img :src="'https://localhost:7136'+a.img" style="height: 100px; width: 100px;" alt="">
                </td>
                <td><a :href="'https://localhost:7136'+a.img">点击看图</a></td>
                <td><input type="button" value="删除" @click="del(a.uid)"></td>
                <td><input type="button" value="编辑" @click="upd(a.uid)"></td>
               
            </tr>
        </tbody>
      </table>
      <input type="button" value="首页" @click="fenye(1)">
      <input type="button" value="上一页" @click="fenye(2)">
      <input type="button" value="下一页" @click="fenye(3)">
      <input type="button" value="尾页" @click="fenye(4)">
      共有{{listdate.count}}行，共有{{listdate.pount}}页，当前第{{date.size}}行，当前{{date.index}}页
    </div>
</template>

<script setup lang="ts">
import{ref,onMounted} from"vue";
import axios from "axios";
import { useRouter } from "vue-router";

const router=useRouter();

const cx=(a:any)=>{
    date.value.uname=a;
    Show();
} 





const upd=(uid:any)=>{
   
    router.push({
                    path:"/Enide",
                    query:{uid:uid},
                })
}







const del=(uid:any)=>{
    if(!confirm('确认删除吗'))
{

}
    axios.delete("https://localhost:7136/api/User/Delete",{params:{uid:uid}}).then(res=>{
        if(res.data>0){
            alert('删除成功');
            Show();
        }else{
            alert('删除失败');
        }

    })
}




const fenye=(a:any)=>{
   if(a==1){
    date.value.index=1;
    Show();
   }
   if(a==2){
      if(date.value.index>1){
        date.value.index-=1;
        Show();

      }
   }
   if(a==3){
    if(date.value.index<listdate.value.pount){
        date.value.index+=1;
        Show();
    }
   }
   if(a==4){
       date.value.index=listdate.value.pount;
       Show();
   }
}














const list=ref([{
      "uid": 2,
      "uxm": "string",
      "uname": "string",
      "hid": 0,
      "ares": 0,
      "tnares": 0,
      "img": "string",
      "isAdmin": true
}])
onMounted(()=>{
    Show();
})
const date=ref({
    index:1,
    size:2,
    uname:'',
    hid:'',
})
const listdate=ref({
    count:0,
    pount:0
})
const Show=()=>{
    axios.get("https://localhost:7136/api/User/Get",{params:date.value}).then(res=>{
         list.value=res.data.data;
         listdate.value.count=res.data.count;
         listdate.value.pount=Math.ceil(res.data.count/date.value.size);

    })
}

 
</script>

<style scoped>

</style>